/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Select, Table, DatePicker, Descriptions, Tag, Modal ,message} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import BuildModalTitle from '@/components/BuildModalTitle';
import AddOrEditArea from './AddOrEditArea';
import {  afterCloseModal } from '@/utils/utils';
import request from '@/utils/request';
const { confirm } = Modal;
const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCustom: false,
      data:[],
      editRecord:{}
    };
  }

  componentDidMount() {
   this.fetch()
  }
  fetch=()=>{
    const that=this;
    request(`/all_regions`,{
      method:'GET',
    }).then((response)=>{
      if(response.status===200){
        that.setState({
          data:response.data.data
        })
      }

    });
  }
  handleAdd=()=>{
    const that=this;
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/regions`,{
      method:'POST',
      data:{
        ...formValues,
        parent_id:formValues.parent_id?formValues.parent_id.split('$')[0]:'',
      }
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        that.setState({
          addModal:false
        })
        message.success('添加成功')
      }
    });
  }
  handleEdit=()=>{
    const that=this;
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/regions/${this.state.editRecord.id}`,{
      method:'PUT',
      data:{
        ...formValues,
        parent_id:formValues.parent_id?formValues.parent_id.split('$')[0]:'',

      }
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        that.setState({
          editModal:false
        })
        message.success('修改成功')
      }
    });
  }
  handleDelete=(id)=>{
    const that=this;
    request(`/regions/${id}`,{
      method:'DELETE',
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        message.success('删除成功')
      }
    });
  }
  render() {
    const that=this;
    const columns = [
      {title: '区域名称', dataIndex: 'name', key: 'name'},
      {title: '备注', dataIndex: 'remark', key: 'remark', width: '30%'},
      {
        title: '操作',
        key: 'right',
        width: 160,
        classname:'operate',
        render: (val,record) => <Fragment>
            <Button
              type="primary"
              size="small"
              icon="edit"
              onClick={(e) => {
                e.stopPropagation();
                this.setState({
                  editRecord: record,
                  editModal: true,
                });
              }
              }
            >编辑
            </Button>
         {/* <Button
            type="danger"
            size="small"
            icon="delete"
            onClick={(e) => {
              e.stopPropagation();
              confirm({
                title: `确定要删除"${record.name}"吗?`,
                content: '请谨慎操作！',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                centered:true,
                maskClosable: true,
                onOk() {
                  that.handleDelete(record.id);
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }
            }
          >删除
          </Button>*/}
        </Fragment>,
      },
    ]

    return (
      <div>
        <div>
          <Button type="primary" block style={{marginBottom:'10px'}} onClick={()=>{
            this.setState({
              addModal:true
            })
          }}>
            添加区域
          </Button>
          <Table   rowKey={record => record.id}
                   size={'small'} bordered pagination={false} columns={columns}  dataSource={this.state.data} />
        </div>
        <Modal
          title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="添加水表厂商"/>}
          visible={this.state.addModal}
          centered
          onOk={this.handleAdd}
          className="addModal"
          onCancel={() => {
            this.setState({ addModal: false });
          }}

        >
          <AddOrEditArea data={this.state.data} wrappedComponentRef={(inst) => this.AddForm = inst}  />

        </Modal>
        <Modal
          title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                  title={`修改 : ${this.state.editRecord.name}`}/>}
          destroyOnClose
          visible={this.state.editModal}
          centered
          onOk={this.handleEdit}
          className="editModal"
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          onCancel={() => {
            this.setState({ editModal: false, editRecord: {} });
          }}

        >
          <AddOrEditArea
            data={this.state.data}
            editRecord={this.state.editRecord}
            wrappedComponentRef={(inst) => this.EditForm = inst}
          />

        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


